---
title: "Tool Panel Component"
enterprise: true
---

Custom Tool Panel Components can be included into the grid's Side Bar. Implement these when you require more Tool Panels to meet your application requirements.

The example below provides a 'Custom Stats' Tool Panel to demonstrates how to create and register a Custom Tool Panel Component with the grid and include it the Side Bar:

{% gridExampleRunner title="Custom Stats" name="custom-stats" /%}

## Implementing a Tool Panel Component

{% includeMarkdoc file="component-tool-panel/_component-interface-javascript.mdoc" /%}
{% includeMarkdoc file="component-tool-panel/_component-interface-angular.mdoc" /%}
{% includeMarkdoc file="component-tool-panel/_component-interface-react.mdoc" /%}
{% includeMarkdoc file="component-tool-panel/_component-interface-vue.mdoc" /%}

{% if isFramework("javascript", "angular", "vue") %}
{% interfaceDocumentation interfaceName="IToolPanelParams" /%}
{% /if %}

{% if isFramework("react") %}
{% interfaceDocumentation interfaceName="CustomToolPanelProps" /%}
{% /if %}

{% if isFramework("react") %}
{% note %}
Enabling `reactiveCustomComponents` affects all custom components. If you have custom components built in an imperative way instead of setting the `reactiveCustomComponents` option, they may need to be rebuilt to take advantage of the new features that `reactiveCustomComponents` offers. Using custom components built in an imperative way is now deprecated, and in AG Grid v32 the `reactiveCustomComponents` option will be `true` by default. See [Migrating to Use reactiveCustomComponents](./upgrading-to-ag-grid-31-1/#migrating-to-use-reactivecustomcomponents).
{% /note %}
{% /if %}

## Registering Tool Panel Components

Registering a Tool Panel component follows the same approach as any other custom components in the grid. For more details see: [Registering Custom Components](./components/#registering-custom-components).

Once the Tool Panel Component is registered with the grid it needs to be included into the Side Bar. The following snippet illustrates this:

{% includeMarkdoc file="component-tool-panel/_configure-javascript.mdoc" /%}
{% includeMarkdoc file="component-tool-panel/_configure-angular.mdoc" /%}
{% includeMarkdoc file="component-tool-panel/_configure-react.mdoc" /%}
{% includeMarkdoc file="component-tool-panel/_configure-vue.mdoc" /%}

For more details on the configuration properties above, refer to the [Side Bar Configuration](./side-bar/#sidebardef-configuration) section.
